<template>
    <div v-theme:column="'narrow'" id="show-blog">
        <h1>博客总览</h1>
        <input v-model="search" type="text" placeholder="搜索">
        <div v-for="(blog,index) in filteredBlogs" :key="index"  class="single-blog">
            <router-link v-bind:to="'/blog/'+blog.id">
              <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
            </router-link>
            <article>
                {{blog.body | snippet}}
            </article>
        </div>
    </div>
</template>

<script>
export default {
  name: "show-blog",
  data() {
    return {
      blogs: [],
      search: ""
    };
  },
  created() {
    this.$http
      .get("http://jsonplaceholder.typicode.com/posts")
      .then(function(data) {
        this.blogs = data.body.slice(0, 10);
      });
  },
  computed: {
    filteredBlogs: function() {
      return this.blogs.filter(blog => {
        return blog.title.match(this.search);
      });
    }
  },
  filters: {
    // 'to-uppercase':function(value){
    //     return value.toUpperCase();
    // }
    toUppercase(value) {
      return value.toUpperCase();
    }
  },
  directives: {
    rainbow: {
      bind(el) {
        el.style.color = "#ec1426";
        el.style.color ="#" +Math.random().toString(16).slice(2, 8);
      }
    }
  }
};
</script>

<style scoped>
#show-blog {
  max-width: 800px;
  margin: 0 auto;
}

.single-blog {
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  background: #eee;
  border: 1px solid #aaa
}

#show-blog a{
  color: #444;
  text-decoration: none;
}

input[type="text"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
</style>


